<template>
  <ScrollPanel style="width: 100%; height: 100%">
    <PanelMenu :model="menus" class="w-full md:w-80" multiple>
      <template #item="{ item }">
        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
          <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
          <span :class="['ml-2', { 'font-semibold': item.items }]">{{
            item.label
          }}</span>
          <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
          <span
            v-if="item.shortcut"
            class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1"
            >{{ item.shortcut }}</span
          >
        </a>
      </template>
    </PanelMenu>
    <Toast />
  </ScrollPanel>
</template>

<script setup lang="ts" name="ScrollMenu">
import { useToast } from "primevue/usetoast";
import { ref } from "vue";

const toast = useToast();
const menus = ref([
  {
    label: "Dashboard",
    icon: "pi pi-home",
    shortcut: "⌘+D",
  },
  {
    label: "Mail",
    icon: "pi pi-envelope",
    badge: 5,
    items: [
      {
        label: "Compose",
        icon: "pi pi-file-edit",
        shortcut: "⌘+N",
      },
      {
        label: "Inbox",
        icon: "pi pi-inbox",
        badge: 5,
      },
      {
        label: "Sent",
        icon: "pi pi-send",
        shortcut: "⌘+S",
      },
      {
        label: "Trash",
        icon: "pi pi-trash",
        shortcut: "⌘+T",
      },
    ],
  },
  {
    label: "Reports",
    icon: "pi pi-chart-bar",
    shortcut: "⌘+R",
    items: [
      {
        label: "Sales",
        icon: "pi pi-chart-line",
        badge: 3,
      },
      {
        label: "Products",
        icon: "pi pi-list",
        badge: 6,
      },
    ],
  },
  {
    label: "Profile",
    icon: "pi pi-user",
    shortcut: "⌘+W",
    items: [
      {
        label: "Settings",
        icon: "pi pi-cog",
        shortcut: "⌘+O",
      },
      {
        label: "Privacy",
        icon: "pi pi-shield",
        shortcut: "⌘+P",
      },
    ],
  },
  {
    label: "Sign Out",
    icon: "pi pi-sign-out",
    command: () => {
      toast.add({
        severity: "success",
        summary: "Signed out",
        detail: "User logged out",
        life: 3000,
      });
    },
  },
]);
</script>
